<template>
  <div class="content" style="padding: 0 20px;">
    <div class="demo-input-suffix">
      <div>
        <span>关键字查询：</span>
        <el-input class="indexInput" v-model="input" placeholder="请输入关键字"></el-input>
        <el-button class="indexButton" @click="keywordClick()" type="primary" icon="el-icon-search"></el-button>
      </div>
      <div>
        <el-button type="primary" class="primaryButton" @click="addFunc()" plain>
          <i class="el-icon-plus"></i>
          添加设备模块
        </el-button>
      </div>
    </div>
    <el-table
      :data="equModulesLists"
      stripe
      style="width: 100%;">
      <el-table-column
        prop="equModulesName"
        label="设备模块名称">
      </el-table-column>
      <el-table-column
        prop="section"
        label="所属路段">
      </el-table-column>
      <el-table-column
        prop="comment"
        label="备注">
      </el-table-column>
      <el-table-column
        prop=""
        label="操作">
        <template slot-scope="scope">
          <a class="reset" style="cursor: pointer;" @click="updateFunc(scope.$index, scope.row)">添加</a>
          <i class="line"></i>
          <a class="reset" style="cursor: pointer;" @click="updateFunc(scope.$index, scope.row)">修改</a>
          <i class="line"></i>
          <a class="delete" style="cursor: pointer;" @click.stop="deleteFunc(scope.$index, scope.row)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      width="25%"
      center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px" class="demo-ruleForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备模块名称" prop="equModulesName">
              <el-input v-model="ruleForm.equModulesName" placeholder="请输入设备模块名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属路段" prop="section">
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="comment">
              <el-input type="textarea" v-model="ruleForm.comment"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="dialog-footer">
            <el-button @click="cancel('ruleForm')">取消</el-button>
            <el-button type="primary" v-if="addOrUpdate == 1" @click="addSave('ruleForm')">确定</el-button>
            <el-button type="primary" v-if="addOrUpdate == 2" @click="updateSave('ruleForm')">确定</el-button>
          </el-col>
        </el-row>
      </el-form>


    </el-dialog>
  </div>
</template>
<script>
  // import userService from 'services/tunnelMsg'

  export default {
    name: "tunnel-list",
    data() {
      var valiNumberPass1 = (rule, value, callback) => {//包含小数的数字
        let reg = /^ZK.*$/g;
        if (value === '') {
          callback(new Error('请输入桩号'));
        } else if (!reg.test(value)) {
          callback(new Error('前两位请输入"ZK"'));
        } else {
          callback();
        }
      };
      var valiNumberPass = (rule, value, callback) => {//包含小数的数字
        let reg = /^YK.*$/g;
        if (value === '') {
          callback(new Error('请输入桩号'));
        } else if (!reg.test(value)) {
          callback(new Error('前两位请输入"YK"'));
        } else {
          callback();
        }
      }
      var valiNumber = (rule, value, callback) => {//包含小数的数字
        if(this.ruleForm.position == 1){
          let reg = /^ZK.*$/g;
          if (value === '') {
            callback(new Error('请输入桩号'));
          } else if (!reg.test(value)) {
            callback(new Error('前两位请输入"ZK"'));
          } else {
            callback();
          }
        }else{
          let reg = /^YK.*$/g;
          if (value === '') {
            callback(new Error('请输入桩号'));
          } else if (!reg.test(value)) {
            callback(new Error('前两位请输入"YK"'));
          } else {
            callback();
          }
        }
      };
      var wgNumber = (rule, value, callback) => {//包含小数的数字
        if (value) {
          if (/[\u4E00-\u9FA5]/g.test(value)) {
            callback(new Error('网关编号不能输入汉字!'));
          } else if(value === ''){
            callback(new Error('请输入网关编号'));
          }else{
            callback();
          }
        }
      };
      var jdNumber = (rule, value, callback) => {//包含小数的数字
        if (value) {
          if (/[\u4E00-\u9FA5]/g.test(value)) {
            callback(new Error('经度不能输入汉字!'));
          } else if(value === ''){
            callback(new Error('请输入经度'));
          }else{
            callback();
          }
        }
      };
      var wdNumber = (rule, value, callback) => {//包含小数的数字
        if (value) {
          if (/[\u4E00-\u9FA5]/g.test(value)) {
            callback(new Error('纬度不能输入汉字!'));
          } else if(value === ''){
            callback(new Error('请输入纬度'));
          }else{
            callback();
          }
        }
      };
      return {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        input: '',
        tunnelLists: [],
        addOrUpdate: 1,
        centerDialogVisible: false,
        addUpdateRadio: false,
        updateCode: '',
        title: '',
        ruleForm: {
          name: '',
          tid: '',
          gid: '',
          hdCount: '',
          laneNumber: '',
          address: '',
          leftLength: '',
          rightLength: '',
          leftStartPile: '',
          leftEndPile: '',
          rightStartPile: '',
          rightEndPile: '',
          comment: '',
          leftDirection: '',
          rightDirection: '',
          tunnelWay: 2,
          length: '',
          startPile: '',
          endPile: '',
          position: 1,
          direction: '',
          location: '',
          longitude: '',
          virtualFlag:0,
          latitude: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入隧道名称', trigger: 'blur'},
          ],
          virtualFlag:[
            {required: true, message: '请选择是否是虚拟隧道', trigger: 'change'},
          ],
          gid: [
            {required: true, message: '请输入网关编号', trigger: 'blur'},
            {required: true, validator:wgNumber, trigger: "blur" }
          ],
          tid: [
            {required: true, message: '请输入隧道编号', trigger: 'blur'},
          ],
          hdCount: [
            {required: true, message: '请输入横洞数', trigger: 'blur'},
          ],
          laneNumber: [
            {required: true, message: '请输入车道数', trigger: 'blur'},
          ],
          address: [
            {required: true, message: '请输入所属高速', trigger: 'blur'},
          ],
          leftLength: [
            {required: true, message: '请输入左隧道总长', trigger: 'blur'},
          ],
          rightLength: [
            {required: true, message: '请输入右隧道总长', trigger: 'blur'},
          ],
          leftStartPile: [
            {required: true, message: '请输入左隧道起始桩号', trigger: 'blur'},
            { required: true, validator:valiNumberPass1, trigger: "blur" }
          ],
          leftEndPile: [
            {required: true, message: '请输入左隧道结束桩号', trigger: 'blur'},
            {required: true, validator:valiNumberPass1, trigger: "blur" }
          ],
          rightStartPile: [
            {required: true, message: '请输入右隧道起始桩号', trigger: 'blur'},
            {required: true, validator:valiNumberPass, trigger: "blur" }
          ],
          rightEndPile: [
            {required: true, message: '请输入右隧道结束桩号', trigger: 'blur'},
            {required: true, validator:valiNumberPass, trigger: "blur" }
          ],
          length: [
            {required: true, message: '请输入隧道总长', trigger: 'blur'},
          ],
          startPile: [
            {required: true, message: '请输入隧道起始桩号', trigger: 'blur'},
            {required: true, validator:valiNumber, trigger: "blur" }
          ],
          endPile: [
            {required: true, message: '请输入隧道结束桩号', trigger: 'blur'},
            {required: true, validator:valiNumber, trigger: "blur" }
          ],
          //新增参数
          leftDirection: [
            {required: true, message: '请输入车流方向', trigger: 'blur'},
          ],
          rightDirection: [
            {required: true, message: '请输入车流方向', trigger: 'blur'},
          ],
          position: [
            {required: true, message: '请选择隧道位置', trigger: 'change'},
          ],
          tunnelWay: [
            {required: true, message: '请选择隧道类型', trigger: 'change'},
          ],
          direction: [
            {required: true, message: '请输入车流方向', trigger: 'blur'},
          ],
          longitude: [
            {required: true, message: '请输入经度', trigger: 'blur'},
            {required: true, validator:jdNumber, trigger: "blur" }
          ],
          latitude: [
            {required: true, message: '请输入纬度', trigger: 'blur'},
            {required: true, validator:wdNumber, trigger: "blur" }
          ],
          comment: [
            {min: 0, max: 100, message: '长度在0 到 100 个字符', trigger: 'blur'}
          ]
        }
      };
    },
    mounted() {
      this.list()
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val
        this.list()
      },
      handleCurrentChange(val) {
        this.pageNo = val
        this.list()
      },
      //隧道列表
      list() {
        let listDate = {
          index: this.pageNo,
          size: this.pageSize,
          key: this.input,
        }
        userService.tunnellist(listDate).then(res => {
          if (res.code == 1) {
            this.tunnelLists = res.list;
            this.total = res.total
          }
        })
      },
      //关键字查询
      keywordClick() {
        this.list()
      },
      //单双向隧道选择
      tunnelTypeChange() {
        if (this.ruleForm.tunnelWay == 1) {
          this.ruleForm.hdCount = "0"
        } else {
          this.ruleForm.hdCount = ""
        }
      },
      //添加
      addFunc() {
        this.addOrUpdate = 1
        this.centerDialogVisible = true
        this.addUpdateRadio = false
        this.title = '设备模块添加'
        this.ruleForm = {
          name: '',
          tid: '',
          gid: '',
          hdCount: '',
          laneNumber: '',
          address: '',
          leftLength: '',
          rightLength: '',
          leftStartPile: '',
          leftEndPile: '',
          rightStartPile: '',
          rightEndPile: '',
          comment: '',
          leftDirection: '',
          rightDirection: '',
          tunnelWay: 2,
          length: '',
          startPile: '',
          endPile: '',
          position: 1,
          direction: '',
          location: '',
          longitude: '',
          virtualFlag:0,
          latitude: ''
        }
      },
      //添加保存
      addSave(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let addDate
            if (this.ruleForm.tunnelWay == 2) {
              addDate = {
                name: this.ruleForm.name,
                tid: this.ruleForm.tid,
                gid: this.ruleForm.gid,
                hdCount: this.ruleForm.hdCount,
                laneNumber: this.ruleForm.laneNumber,
                address: this.ruleForm.address,
                leftLength: this.ruleForm.leftLength,
                rightLength: this.ruleForm.rightLength,
                leftStartPile: this.ruleForm.leftStartPile,
                leftEndPile: this.ruleForm.leftEndPile,
                rightStartPile: this.ruleForm.rightStartPile,
                rightEndPile: this.ruleForm.rightEndPile,
                comment: this.ruleForm.comment,
                leftDirection: this.ruleForm.leftDirection,
                rightDirection: this.ruleForm.rightDirection,
                location: this.ruleForm.longitude + ',' + this.ruleForm.latitude,
                tunnelWay: this.ruleForm.tunnelWay,
                virtualFlag:this.ruleForm.virtualFlag,
                type: 'tunnel'
              }
            } else {
              addDate = {
                name: this.ruleForm.name,
                tid: this.ruleForm.tid,
                gid: this.ruleForm.gid,
                hdCount: this.ruleForm.hdCount,
                laneNumber: this.ruleForm.laneNumber,
                address: this.ruleForm.address,
                comment: this.ruleForm.comment,
                tunnelWay: this.ruleForm.tunnelWay,
                location: this.ruleForm.longitude + ',' + this.ruleForm.latitude,
                virtualFlag:this.ruleForm.virtualFlag,
                type: 'tunnel'
              }
              if (this.ruleForm.position == 1) {
                addDate.leftLength = this.ruleForm.length,
                  addDate.leftStartPile = this.ruleForm.startPile,
                  addDate.leftEndPile = this.ruleForm.endPile,
                  addDate.leftDirection = this.ruleForm.direction
              } else {
                addDate.rightLength = this.ruleForm.length,
                  addDate.rightStartPile = this.ruleForm.startPile,
                  addDate.rightEndPile = this.ruleForm.endPile,
                  addDate.rightDirection = this.ruleForm.direction
              }
            }
            userService.tunneladd(addDate).then(res => {
              if (res.code == 1) {
                this.$message({
                  type: 'success',
                  message: '添加隧道成功！'
                });
                this.list()
              } else {
                this.$message({
                  type: 'error',
                  message: '添加隧道失败！'
                });
              }
              this.centerDialogVisible = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //取消
      cancel(formName) {
        this.centerDialogVisible = false
        this.$refs[formName].resetFields();
      },
      // 点击更新
      updateFunc(index, value) {
        this.addOrUpdate = 2
        this.centerDialogVisible = true
        this.addUpdateRadio = true
        this.title = '设备模块修改'
        this.updateCode = value.code
        let updataDate = {
          code: value.code
        }
        userService.tunnelUpdate(updataDate).then(res => {
          if (res.code == 1) {
            this.ruleForm.name = res.model.name
            this.ruleForm.tid = res.model.tid
            this.ruleForm.gid = res.model.gid
            this.ruleForm.hdCount = res.model.hdCount
            this.ruleForm.laneNumber = res.model.laneNumber
            this.ruleForm.address = res.model.address
            this.ruleForm.tunnelWay = res.model.tunnelWay
            this.ruleForm.longitude = res.model.location.slice(0, res.model.location.indexOf(','))
            this.ruleForm.latitude = res.model.location.slice(res.model.location.indexOf(',') + 1, res.model.location.length)
            this.ruleForm.virtualFlag = res.model.virtualFlag
            this.ruleForm.comment = res.model.comment
            if (res.model.tunnelWay == 2) {
              this.ruleForm.leftLength = res.model.leftLength
              this.ruleForm.rightLength = res.model.rightLength
              this.ruleForm.leftStartPile = res.model.leftStartPile
              this.ruleForm.leftEndPile = res.model.leftEndPile
              this.ruleForm.rightStartPile = res.model.rightStartPile
              this.ruleForm.rightEndPile = res.model.rightEndPile
              this.ruleForm.leftDirection = res.model.leftDirection
              this.ruleForm.rightDirection = res.model.rightDirection
            } else {
              if (res.model.leftLength != undefined) {
                this.ruleForm.position = 1
                this.ruleForm.length = res.model.leftLength
                this.ruleForm.startPile = res.model.leftStartPile
                this.ruleForm.endPile = res.model.leftEndPile
                this.ruleForm.direction = res.model.leftDirection
              } else {
                this.ruleForm.position = 2
                this.ruleForm.length = res.model.rightLength
                this.ruleForm.startPile = res.model.rightStartPile
                this.ruleForm.endPile = res.model.rightEndPile
                this.ruleForm.direction = res.model.rightDirection

              }
            }


          }
        })
      },
      // 更新保存
      updateSave(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let updateDate
            if (this.ruleForm.tunnelWay == 2) {
              updateDate = {
                code: this.updateCode,
                name: this.ruleForm.name,
                tid: this.ruleForm.tid,
                gid: this.ruleForm.gid,
                hdCount: this.ruleForm.hdCount,
                laneNumber: this.ruleForm.laneNumber,
                address: this.ruleForm.address,
                tunnelWay: this.ruleForm.tunnelWay,
                location: this.ruleForm.longitude + ',' + this.ruleForm.latitude,
                virtualFlag: this.ruleForm.virtualFlag,
                comment: this.ruleForm.comment,
                leftLength: this.ruleForm.leftLength,
                rightLength: this.ruleForm.rightLength,
                leftStartPile: this.ruleForm.leftStartPile,
                leftEndPile: this.ruleForm.leftEndPile,
                rightStartPile: this.ruleForm.rightStartPile,
                rightEndPile: this.ruleForm.rightEndPile,
                leftDirection: this.ruleForm.leftDirection,
                rightDirection: this.ruleForm.rightDirection,
              }
            } else {
              updateDate = {
                code: this.updateCode,
                name: this.ruleForm.name,
                tid: this.ruleForm.tid,
                gid: this.ruleForm.gid,
                hdCount: this.ruleForm.hdCount,
                laneNumber: this.ruleForm.laneNumber,
                address: this.ruleForm.address,
                tunnelWay: this.ruleForm.tunnelWay,
                location: this.ruleForm.longitude + ',' + this.ruleForm.latitude,
                virtualFlag: this.ruleForm.virtualFlag,
                comment: this.ruleForm.comment
              }
              if (this.ruleForm.position == 1) {
                updateDate.leftLength = this.ruleForm.length,
                  updateDate.leftStartPile = this.ruleForm.startPile,
                  updateDate.leftEndPile = this.ruleForm.endPile,
                  updateDate.leftDirection = this.ruleForm.direction
              } else {
                updateDate.rightLength = this.ruleForm.length,
                  updateDate.rightStartPile = this.ruleForm.startPile,
                  updateDate.rightEndPile = this.ruleForm.endPile,
                  updateDate.rightDirection = this.ruleForm.direction
              }
            }
            console.log(updateDate);
            userService.tunnelUpdateSave(updateDate).then(res => {
              if (res.code == 1) {
                this.$message({
                  type: 'success',
                  message: '修改隧道成功！'
                });
                this.list()
              } else {
                this.$message({
                  type: 'error',
                  message: '修改隧道失败！'
                });
              }
              this.centerDialogVisible = false

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      //删除
      deleteFunc(index, value) {
        this.$confirm('此操作将删除该隧道, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          let deleteDate = {
            sectionCode: value.code
          }
          userService.tunnelDelete(deleteDate).then(res => {
            if (res.code == 1) {
              this.list()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      }
    }
  }
</script>
<style scoped lang="scss">
  /*@import '../public/homePage.css';*/
  .dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .demo-ruleForm {
    height: 100%;
  }

  .el-dialog__body {
    padding: 0 20px !important;
  }

  .demo-input-suffix {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
  }

  .demo-input-suffix div {
    flex: 1;
  }

  .demo-input-suffix div:nth-child(2) {
    text-align: right;
  }

  .demo-input-suffix span {
    color: #666666;
    font-size: 14px;
  }

  .indexInput {
    width: 20%;
  }

  .indexButton {
    margin-left: 10px;
  }

  .content {
    background-color: #ffffff;
  }

  .reset {
    color: #1890FF;
  }

  .delete {
    color: #F5222D;
  }

  .line {
    display: inline-block;
    width: 1px;
    background: rgba(0, 0, 0, 0.09);
    margin: 0 11px;
    height: 14px;
  }

  .block {
    margin-top: 20px;
    text-align: center;
  }
</style>
